<template>
	<div>
		<!-- QES规则管理 -->
		<pol-title title="QES规则管理"></pol-title>
		<div class="padding-lr-lg padding-bottom-lg border-solid bg-tm radius-sm text-white search-dark">
			<div class="flex nav-box">
				<div class="nav-item cursor" v-for="(item, index) in navList" :key='index' :class="{'active': navActive === item.type}" @click="navActive = item.type">
					{{item.name}}
				</div>
			</div>
			
			<!-- 搜索框 -->
			<pol-search :form="searchForm" :schema="schema">
				<template #btnSlot>
					<el-button icon="Download" type="primary" class="btn-bg-blue padding-lr-xl" style="height: 40px; line-height: 40px;">导入</el-button>
				</template>
			</pol-search>

			<!-- 表格 -->
			<pol-table ref="polTableRef" v-bind="tableOpt" :isPage="true" :isSelection="true" height="calc(100vh - 400px)">
				<template #chongzhi="{row}">
					<div class="flex align-center">
						<span class="text-green2 cursor" @click="dialogHeatScheduleEdit = true">修改</span>
						<span class="text-green2 cursor margin-left-lg">禁用</span>
					</div>
				</template>

				<template #pageLeft>
					<div class="margin-right-xxl">
						<el-button icon="Upload" type="primary" class="btn-bg-blue btn-box padding-lr-xl" style="height: 40px; line-height: 40px;">导出</el-button>
					</div>
				</template>
			</pol-table>
		</div>

		<!-- 弹窗 -->
		<el-dialog v-model="dialogHeatScheduleEdit" title="修改QES规则" width="700" align-center>
			<div class="padding search-light">
				<div class="flex align-center justify-center text-lg margin-bottom-lg" style="color: #FFA73F;">
					<el-icon><InfoFilled /></el-icon>
					<span class="margin-left">当前操作涉及到安全隐患，只有管理员可以修改</span>
				</div>
				
				<lay-json-schema-form :model="formData" :schema="schema2"></lay-json-schema-form>
				<div class="margin-top-xl flex justify-center align-center">
					<el-button class="padding-lr-xl text-blue3 solid-blue" size="large" @click="dialogHeatScheduleEdit = false">返回</el-button>
					<div class="margin-left-xxl">
						<el-button type="primary" class="btn-bg-blue btn-box padding-lr-xl" size="large">保存</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	
	const navActive = ref('1')
	const navList = ref([
		{
			name: '公共质量事件设置',
			type: '1'
		},
		{
			name: '钢种&断面质量规则',
			type: '2'
		}
	])
	
	const dialogHeatScheduleEdit = ref(false)

	//表单数据
	const formData = ref({
		CardTypeCode: '', //
		CardTypeName: '', //
	});

	//表单配置
	const schema2 = ref({
		CardTypeName4: {
			label: '规则：',
			type: 'textarea',
			props: {
				type: 'textarea',
				placeholder: '请输入规则',
			},
			colProps: {
				md: 24,
			},
		},
	});

	//搜素数据
	const searchForm = ref({
		CardTypeCode: '', //
		CardTypeName: '', //
	});

	//搜素配置
	const schema = ref({
		CardTypeCode: {
			label: '',
			type: 'checkbox',
			props: {
				options: [{
					label: "仅显示启用项",
					value: 0,
					skin: "primary"
				}],
			},
			colProps: {
				md: 4,
			},
		},
		CardTypeName: {
			label: '关键字',
			type: 'input',
			props: {
				type: 'text',
				placeholder: '选择输入关键字搜索',
			},
			colProps: {
				md: 6,
			},
		}
	});

	const polTableRef = ref(null); //表格ref
	//表格配置
	const columns = ref([
		{ label: '钢种名称', key: 'ItemCode', align: 'center' },
		{ label: '钢类', key: 'ItemName', align: 'center' },
		{ label: '启用状态', key: 'ItemValue', align: 'center' },
		{ label: '密度', key: 'IsDefault', align: 'center' },
		{ label: '固相线', key: 'P_IsSys', align: 'center' },
		{ label: '液相线', key: 'P_IsReadOnly', align: 'center' },
		{ label: '中包温度范围', key: 'gangbao', align: 'center' },
		{ label: '拉速范围', key: 'kaishi', align: 'center' },
		{ label: '操作', key: 'chongzhi', align: 'center', slot: true, width: '130px' },
	]);

	//表格配置
	const tableOpt = ref({
		columns: columns.value,
		localData: [{
				ItemCode: 'Q195',
				ItemName: '锻钢',
				ItemValue: '启用',
				IsDefault: '7.85',
				P_IsSys: '1400-1450',
				P_IsReadOnly: '1600',
				gangbao: '1520-1560',
				kaishi: '1.0-4.0',
			},
			{
				ItemCode: 'Q195',
				ItemName: '锻钢',
				ItemValue: '启用',
				IsDefault: '7.85',
				P_IsSys: '1400-1450',
				P_IsReadOnly: '1600',
				gangbao: '1520-1560',
				kaishi: '1.0-4.0',
			}, {
				ItemCode: 'Q195',
				ItemName: '锻钢',
				ItemValue: '启用',
				IsDefault: '7.85',
				P_IsSys: '1400-1450',
				P_IsReadOnly: '1600',
				gangbao: '1520-1560',
				kaishi: '1.0-4.0',
			}, {
				ItemCode: 'Q195',
				ItemName: '锻钢',
				ItemValue: '启用',
				IsDefault: '7.85',
				P_IsSys: '1400-1450',
				P_IsReadOnly: '1600',
				gangbao: '1520-1560',
				kaishi: '1.0-4.0',
			}, {
				ItemCode: 'Q195',
				ItemName: '锻钢',
				ItemValue: '启用',
				IsDefault: '7.85',
				P_IsSys: '1400-1450',
				P_IsReadOnly: '1600',
				gangbao: '1520-1560',
				kaishi: '1.0-4.0',
			}, {
				ItemCode: 'Q195',
				ItemName: '锻钢',
				ItemValue: '启用',
				IsDefault: '7.85',
				P_IsSys: '1400-1450',
				P_IsReadOnly: '1600',
				gangbao: '1520-1560',
				kaishi: '1.0-4.0',
			}, {
				ItemCode: 'Q195',
				ItemName: '锻钢',
				ItemValue: '启用',
				IsDefault: '7.85',
				P_IsSys: '1400-1450',
				P_IsReadOnly: '1600',
				gangbao: '1520-1560',
				kaishi: '1.0-4.0',
			}, {
				ItemCode: 'Q195',
				ItemName: '锻钢',
				ItemValue: '启用',
				IsDefault: '7.85',
				P_IsSys: '1400-1450',
				P_IsReadOnly: '1600',
				gangbao: '1520-1560',
				kaishi: '1.0-4.0',
			}, {
				ItemCode: 'Q195',
				ItemName: '锻钢',
				ItemValue: '启用',
				IsDefault: '7.85',
				P_IsSys: '1400-1450',
				P_IsReadOnly: '1600',
				gangbao: '1520-1560',
				kaishi: '1.0-4.0',
			}, {
				ItemCode: 'Q195',
				ItemName: '锻钢',
				ItemValue: '启用',
				IsDefault: '7.85',
				P_IsSys: '1400-1450',
				P_IsReadOnly: '1600',
				gangbao: '1520-1560',
				kaishi: '1.0-4.0',
			}, {
				ItemCode: 'Q195',
				ItemName: '锻钢',
				ItemValue: '启用',
				IsDefault: '7.85',
				P_IsSys: '1400-1450',
				P_IsReadOnly: '1600',
				gangbao: '1520-1560',
				kaishi: '1.0-4.0',
			}, {
				ItemCode: 'Q195',
				ItemName: '锻钢',
				ItemValue: '启用',
				IsDefault: '7.85',
				P_IsSys: '1400-1450',
				P_IsReadOnly: '1600',
				gangbao: '1520-1560',
				kaishi: '1.0-4.0',
			}, {
				ItemCode: 'Q195',
				ItemName: '锻钢',
				ItemValue: '启用',
				IsDefault: '7.85',
				P_IsSys: '1400-1450',
				P_IsReadOnly: '1600',
				gangbao: '1520-1560',
				kaishi: '1.0-4.0',
			}, {
				ItemCode: 'Q195',
				ItemName: '锻钢',
				ItemValue: '启用',
				IsDefault: '7.85',
				P_IsSys: '1400-1450',
				P_IsReadOnly: '1600',
				gangbao: '1520-1560',
				kaishi: '1.0-4.0',
			},
		]
	});
</script>

<style lang="scss" scoped>
	.nav-box{
		background: #113571;
		border-radius: 4px;
		height: 62px;
		line-height: 62px;
		padding: 0 100px;
		
		.nav-item{
			padding: 0 50px;
			text-align: center;
		}
		
		.active {
			background: #E5F3FF;
			color: #087CE7;
			border-radius: 4px 4px 0 0;
		}
	}
</style>